import React, { useState, useEffect } from 'react';
import Breadcrumb from 'components/common/Breadcrumb';
import './index.less';
import Area from 'components/Area';
import { Form, Card, Collapse } from 'antd';
import {
    getLiftingSettingByArea,
    ILiftingSetting,
} from 'api/LiftingSetting';

import SettingForm from './SettingForm';
import moment from 'moment';

const FuncSetting = () => {
    const [selectedArea, setSelectedArea] = useState(0);
    const [showLedTimeRange, setShowLedTimeRange] = useState(false);
    /** 表单初始化 */
    const [form] = Form.useForm();
    const [liftControls, setLiftControls] = useState<ILiftingSetting[]>([])
    const [activeControl, setActiveControl] = useState(-1)
    useEffect(() => {
        if (selectedArea === 0) return;
        // setLedType(-1);
        updateControlsList('init')
    }, [selectedArea]);
    const updateControlsList = async (type: string) => {
        const res = await getLiftingSettingByArea({ areaId: selectedArea })
        if (!res) {
            setLiftControls([])
            form.resetFields();
            return;
        }
        setLiftControls(res)
        if (type === 'init' && res.length > 0) {
            activeControlChange(res[0].id, res)
        }
    }
    const activeControlChange = (value: any, controls: ILiftingSetting[]) => {
        setActiveControl(value)
        setShowLedTimeRange(!showLedTimeRange)
        const control = controls.find(item => item.id === +value)
        form.setFieldsValue({
            infraredFlag: control?.infraredFlag,
            collisionFlag: control?.collisionFlag,
            inplaceFlag: control?.inplaceFlag,
            ledFlag: control?.ledFlag === 1 ? 1 : 0,
            ledType: control?.ledType,
            ledBeelType: control?.ledBeelType,
            voltageFlag: control?.voltageFlag,
            riseTime: control?.riseTime,
            downTime: control?.downTime,
            controlClock: control?.controlClock ? moment(control?.controlClock) : '',
            controlClockSet: control?.controlClock ? moment(control?.controlClock) : '',
            ledTimeRange: control?.ledType === 2 ? [moment(+control.ledStartTime), moment(+control.ledEndTime)] : ['', '']
        })
        setShowLedTimeRange(control?.ledType === 2)
    }
    return (
        <div className="func-setting">
            <Breadcrumb crumbs={['路桩配置', '功能设置']}></Breadcrumb>
            <div className="flex">
                <Area selectedArea={selectedArea} setSelectedArea={setSelectedArea} canSelectAll={false}></Area>
                {
                    liftControls.length > 0 ?
                        <Card className="func-setting-right" hoverable>
                            <Collapse activeKey={activeControl} onChange={(value) => activeControlChange(value, liftControls)} accordion>
                                {
                                    liftControls.map((liftControl) =>
                                        <Collapse.Panel key={liftControl.id}
                                            header={<div className="bold">控制箱IP: {liftControl.ipAddress}</div>}>
                                            <SettingForm
                                                form={form}
                                                selectedArea={selectedArea}
                                                areaSettingInfo={liftControl}
                                                updateControlsList={updateControlsList}
                                                showLedTimeRange={showLedTimeRange}
                                                toggleShowLedTimeRange={setShowLedTimeRange}
                                            />
                                        </Collapse.Panel>)
                                }
                            </Collapse>
                        </Card>
                        : <div className="func-setting-right flex-center font-24" style={{ color: '#ccc' }}>暂无设备</div>
                }
            </div>
        </div>
    );
};
export default FuncSetting;
